<template>
<div class="position-list" v-loading="positionLoading">
<div class="position-item" v-for="(item,index) in list" :key="item.id" @click="selected=item.id" :class="selected===item.id?'active':''" >
 <div class="title-item">
   <div class="title">{{item.jobTitle}}</div>
   <div class="wage">{{item.minSalary}}-{{item.maxSalary}}<span class="unit">元</span></div>
 </div>
  <div class="address">{{item.jobAddress}}</div>
</div>

  <div v-if="list.length<=0" style="color: red">您还没有发布岗位，是否发布岗位</div>
</div>
</template>

<script>
import {getMyPublishApi} from "@/api/personal";

export default {
  name: "ChoosePosition",
  data(){
    return{
      list:[],
      positionLoading:false,
      selected:null,
    }
  },
  methods:{
    getMyPublish(){
      this.positionLoading=true
      getMyPublishApi({recruitState:3,page:1,limit:100}).then((res)=>{
        this.list=res.list;
      }).finally(()=>{
        this.positionLoading=false
      })
    },
    submit(){
      if(this.list.length<=0)
      {
        this.$router.replace({path:"/mine-center/enterprise?tableId=2"});
        return;
      }
      if(!this.selected){
        this.$message.error('请先选择岗位')
        return;
      }
      this.$emit("child",this.selected);
    }
  },
  mounted() {
    this.getMyPublish()
  }
}
</script>

<style scoped lang="scss">
.position-list{
  padding: 30px;
  max-height: 540px;
  overflow-y: scroll;
  .position-item{
    border-radius: 10px;
    box-shadow: 0 0 10px 0 #efefef;
    background: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0);
    .title-item{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .title{
        font-size: 20px;
        font-weight: bold;
        margin-bottom:10px;
      }
      .wage{
        color: $orange;
        font-size: 18px;
        font-weight: bold;
        .unit{
          font-size: 16px;
          font-weight: 100;
          color: $orange;
        }
      }
    }
    .address{
      color: $darkGray;
    }
  }
  .position-item.active{
    border: 1px solid $orange;
  }
  .position-item:last-child{
    margin-bottom: 0px;
  }
}
</style>
